<template>
    <div class="main">
      <section>
        <!--搜索条件-->
        <div class="filter-container" :inline="true">
          <el-input placeholder="请输入要查询的手机号" v-model="listQuery.mobile"></el-input>
          <el-input placeholder="请输入订单号" v-model="listQuery.orderNo"></el-input>
          <el-button  type="primary" icon="el-icon-search" @click="getResult"> 开始查询</el-button>
        </div>

        <!--搜索结果-->
        <el-table :data="result" v-loading="listLoading" element-loading-text="给我一点时间" border>
           <!--变更前-->
          <el-table-column
            prop="createAt"
            width="160"
            label="变更时间"></el-table-column>
          <el-table-column
            prop="orderNo"
            label="订单号">
            <template slot-scope="scope">
              <a @click="checkOrder(scope.row.orderId)">{{scope.row.orderNo}}</a>
            </template></el-table-column>
          <el-table-column
            prop="sourceInfo"
            label="来源">
            <template slot-scope="scope">
              <span>{{scope.row.sourceInfo}}</span>
            </template></el-table-column>

          <el-table-column label="变更前">
            <el-table-column
              prop="beforeRole"
              :class-name="color.fm"
              label="角色">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.userId)" v-text="levels[scope.row.beforeRole]"></a>
              </template>
            </el-table-column>
            <el-table-column
              prop="beforeFatherMobile"
              label="推荐人号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.beforeFatherId)">{{scope.row.beforeFatherMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="beforeAreaMobile"
              :class-name="color.ba"
              label="大区号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.beforeAreaId)">{{scope.row.beforeAreaMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="beforeRecommendAreaMobile"
              :class-name="color.bra"
              label="推荐大区号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.beforeRecommendAreaId)">{{scope.row.beforeRecommendAreaMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="beforeDirectMobile"
              :class-name="color.bd"
              label="董事号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.beforeDirectId)">{{scope.row.beforeDirectMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="beforeRecommendDirectMobile"
              :class-name="color.brd"
              label="推荐董事号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.beforeRecommendDirectId)">{{scope.row.beforeRecommendDirectMobile}}</a>
              </template></el-table-column>
          </el-table-column>

          <!-- 变更后-->
          <el-table-column label="变更后">
            <el-table-column
              prop="afterRole"
              :class-name="color.fm"
              label="角色">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.userId)" v-text="levels[scope.row.afterRole]"></a>
              </template>
            </el-table-column>
            <el-table-column
              prop="afterFatherMobile"
              label="推荐人号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.afterFatherId)">{{scope.row.afterFatherMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="afterAreaMobile"
              :class-name="color.ba"
              label="大区号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.afterAreaId)">{{scope.row.afterAreaMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="afterRecommendAreaMobile"
              :class-name="color.bra"
              label="推荐大区号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.afterRecommendAreaId)">{{scope.row.afterRecommendAreaMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="afterDirectMobile"
              :class-name="color.bd"
              label="董事号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.afterDirectId)">{{scope.row.afterDirectMobile}}</a>
              </template></el-table-column>
            <el-table-column
              prop="afterRecommendDirectMobile"
              :class-name="color.brd"
              label="推荐董事号码">
              <template slot-scope="scope">
                <a @click="checkUser(scope.row.afterRecommendDirectId)">{{scope.row.afterRecommendDirectMobile}}</a>
              </template></el-table-column></el-table-column>
        </el-table>
      </section>
    </div>
</template>

<script>
    export default {
        name: "upgradeRecord",
      data() {
          return {
            color: {
              fm: '',
              ba: '',
              bra: '',
              bd: '',
              brd: '',
            },
            listLoading: false,
            // 会员等级
            levels: {
              '0': '普通用户',
              '1': '兰蜜',
              '2': '大区',
              '3': '董事',
            },
            result: [],
            info: {},
            listQuery: {
              mobile: '',
              orderNo: ''
            }
          }
      },
      created() {
        // console.log(this.listQuery)
      },
      methods: {

      //    查看用户信息
        checkUser(val){
          // console.log('chen')
          this.$router.push({name: 'memberDetail', params: {id: val}})
        },

      //  查看订单
        checkOrder(val){
          this.$router.push({name: 'orderDetail', params: {id: val}})
        },

      //    获取查询结果
        getResult() {
          this.listLoading = true
          this.request({
            url: `/bsnl-member/memberLog/get`,
            method: 'get',
            params: this.listQuery
          }).then(res => {
            this.listLoading = false
            if(res.data.length === undefined){
              this.result = []
              this.$message({
                message: '没有对应的结果！',
                type: 'info'
              })
              return
            }
            this.result = res.data
            this.result.forEach(item => {
              if(item.beforeRole !== item.afterRole){
                this.color.fm = 'green'
              }
              if(item.beforeAreaMobile !== item.afterAreaMobile){
                this.color.ba = 'blue'
              }
              if(item.beforeRecommendAreaId !== item.afterRecommendAreaId){
                this.color.bra = 'red'
              }
              if(item.beforeDirectMobile !== item.afterDirectMobile){
                this.color.bd = 'yellow'
              }
              if(item.beforeRecommendDirectId !== item.afterRecommendDirectId){
                this.color.brd = 'perpur'
              }
            })
          }).catch(err => {
            this.listLoading = false
            console.log(err)
          })

        }
      }
    }
</script>

<style scoped>
.el-table__row a:hover { color: #09f}
.el-table td.green { background: #ebfff5!important;}
</style>
